<!-- PREVIEW DATA -->
<link href="__PUBLIC__/vendors/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet">
<!-- load the JS files in the right order -->
<!-- sortable plugin for sorting/rearranging initial preview -->
<script src="__PUBLIC__/vendors/bootstrap-fileinput/js/plugins/sortable.min.js"></script>
<!-- purify plugin for safe rendering HTML content in preview -->
<script src="__PUBLIC__/vendors/bootstrap-fileinput/js/plugins/purify.min.js"></script>
<script src="__PUBLIC__/vendors/bootstrap-fileinput/js/fileinput.js"></script>
<script src="__PUBLIC__/vendors/bootstrap-fileinput/js/zh.js"></script>

{php}
$maxsize = config('one_img_size');
if (!isset($single_image) || empty($single_image["[uploader-name]"]))
{
    $previewImage = "''";
    $previewConfig = "''";
    $single_image["[uploader-name]"] = "";
}
else
{
    $config[] = array(
        "url" => url("Utils/removeSingleImage"),
        "key" => 0,
    );

    $image= array($single_image["[uploader-name]"]);
    $previewImage = json_encode($image);
    $previewConfig = json_encode($config);
}
{/php}

<input id="single-uploader-[uploader-name]" name="single-uploader-[uploader-name]" type="file" class="file-loading">
<input type="hidden" id="[uploader-name]" name="[uploader-name]" value="{$single_image.[uploader-name]}">

<script>
    //上传处理器
    var input= $("#single-uploader-[uploader-name]");

    //图片管理器
    var image = $("#[uploader-name]");
    $("#single-uploader-[uploader-name]").fileinput({
        language: 'zh',
        uploadUrl: "{:url('Utils/uploadSingleImage',array('name'=>'single-uploader-[uploader-name]'))}",
        uploadAsync: true,
        maxFileCount: 1,
        showUpload: false,
        showRemove: false,
        overwriteInitial: true,
        autoReplace: true,
        maxFileSize: {$maxsize},
        layoutTemplates: {actionZoom:"",actionUpload:"",actionDelete:""},
        initialPreview: {$previewImage},
        initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
        initialPreviewFileType: 'image', // image is the default and can be overridden in config below
        initialPreviewConfig: {$previewConfig},
        purifyHtml: true,
        uploadExtraData: {
            img_key: "1000",
            img_keywords: "happy, places",
        }
    }).on("filebatchselected", function(event, files) {
        // 修改$(".file-preview-success").remove();
        if (files.length > 0)
        {
            //图片选择完成后自动上传
            $("#single-uploader-[uploader-name]").fileinput("upload");
        }
    }).on('fileuploaded', function(event, data, id) {
        if(data.response)
        {
            if (data.response.status == 0)
            {
                //获取图像URL
                var url = data.response.url;

                $("#[uploader-name]").val(url);
            }
        }
    }).on('fileclear', function(event, id) {
        $("#[uploader-name]").val("");
    }).on('filesuccessremove', function(e, id) {
        $("#[uploader-name]").val("");
    }).on('filedeleted', function(e, id) {
        console.log('File uploaded params', id);
        $("#[uploader-name]").val("");
    });

</script>